*{
 padding: 0;
 margin: 0;
 box-sizing: border-box;
/* color:green;*/
/* font-size:20px;*/
}


#container{
 background: #eee;
 width:100%;
 margin-bottom: 50px;
 margin-top: 20px;
}

#status{
 position: fixed;
 display: none;
/* width:200px;*/
 padding: 0px 20px;
 height: 50px;
 background: rgb(100, 100, 100, 0.8);
 top:250px;
 margin: 0 auto;
 text-align: center;
 line-height: 50px;
 font-size: 20px;
 color:#fff;
 z-index: 1006;

}



#toolBox{
 background: yellow;
    border:1px solid #ccc;
 width:80%;
 margin: 0 auto;
 font-size: 0px;
 box-shadow: 10px 10px 5px #ccc;
 

}

#homeBox{
 display:block;
 width: 20px;
 height: 150px;
 position: relative;
 top: 0px;
 left:-21px;
 float: left;
 font-size: 16px;
}
#home{
 display: inline-block;
 text-align: center;
 width: 20px;
 height: 50px;
 background: red;
 color:#FFF;
 text-decoration: none;


}
#log{
 display: inline-block;
 text-align: center;
 width: 20px;
 height: 50px;
 background: green;
 color:#FFF;
 text-decoration: none;
}
#enter{
 display: inline-block;
 text-align: center;
 width: 20px;
 height: 50px;
 background: blue;
 color:#FFF;
 text-decoration: none;
}


#toolBox #toCenter{
 width:100%;
 font-size: 0px;
/* background: blue;*/
 margin: 0 auto;

}


#toolBox .toolButton{
/* position: relative;*/
 display: inline-block;
 text-align: center;
/* border: 1px solid red;*/
 width:80px;
 height: 40px;
 line-height: 40px;
 list-style: none;
/* float: left;*/
 font-size: 16px;
 cursor: pointer;
 margin-bottom: 10px;
 margin-top: 10px;
 box-shadow: 10px 10px 5px rgb(100, 100, 100 ,0.5);

}

#toolBox .toolButton:active{
 
  box-shadow:none;
  background-color: rgb(250, 250, 250 ,1);
    border-radius: 3px;
    z-index: 1000;
}
#toolBox #clsBox{
 display: inline-block;
 width:160px;
 line-height: 41px;
 height: 40px;
 background-color: rgb(250, 250, 250 ,1);
 border-radius: 3px;
 border: 1px solid rgb(100, 100, 100 ,1);
 padding-right: 10px;
}
#toolBox #clsBox #cls{
 padding: 0;
    display: block;
    margin-top: 5px;
    border: none;
    outline: none;
    padding-bottom: -1px; /* 微调底部间距 */
 width:100px;
 height: 30px;
 background: #fff;
 list-style: none;
 outline-style: none;
 font-size: 16px;
 line-height: 2px;
 border-bottom:1px solid #ccc ;
 float: right;
 /*background-color: red;*/
 background-color: rgb(250, 250, 250 ,1);
 color:blue;
}







#textArea{
 white-space: normal;
 position: relative;
 width: 80%;
 min-height:700px;
 background: #fff;
 margin: 0  auto;
 border:1px solid #ccc;
 font-size: 20px;
 padding:10px;
 outline-style: none;
 margin-top: 10px;
 box-shadow: 10px 10px 5px #ccc;
 background: #eee;
 padding-top:20px;
 line-height: 2em;
}
/*#textArea p:nth-child(1){
 text-decoration: underline;
}*/

.tableBox{
 position: relative;
/* height: 300px;*/
/* background: red;*/
 font-size: 0px;
 margin: 0 auto;
 width: 201px; 
 height: 120px;
/* border: 1px dashed #ccc;*/

}



.columBox{

 background: yellow;
 width: 150px; 
 height: 30px;
 
 
}
.columBox li{
 display: inline-block;
 width:50px;
 height: 30px;
 font-size: 20px;
 list-style: none;
 float: left;
 border-left: 1px dashed #ccc;
 text-align: center;
 line-height:30px;
}

.columBox li:hover{
 cursor: pointer;
}


.insertTableArea{
/*  margin-top: 1px;*/
 width: 151px; 
 height: 90px;
 float: left;
}


table{

/* background: green;*/
 height: 100%;
 float: left;
 margin: 0px;
 border-collapse: collapse;
/* border:1px solid black;*/
}

 table td, table th{
/* display: inline-block;*/
 border: 1px dashed #ccc;
 height:20px;
 line-height: 30px;
 text-align: center;
 font-size:26px ;
 border-collapse: collapse;
 white-space: normal; 
    word-wrap: break-word;
   overflow: hidden;

}
 table th{
 border-bottom: 3px solid black;
}

 table th span{
 display: inline-block;
 width: 100%;
 height: 100%;
}
 table td span{
 display: inline-block;
 width: 100%;
 height: 100%;
}

.rowBox{
/* position: absolute;*/
 float: right;
 width: 50px; 
 height: 90px;
   background: yellow;
   font-size: 20px;
 margin-top: 1px;



}



.rowBox li{
 display: inline-block;
 list-style: none;
 width: 100%;
 height: 30px;
 line-height: 30px;
 border-right: 1px dashed #ccc;
 border-bottom: 1px dashed #ccc;
 font-size: 20px;
 text-align: center;
 disable:true;

}
.rowBox li:nth-child(1)
{
 border-bottom: 1px dashed #ccc;
 border-top: 1px dashed #ccc;
}
.rowBox li:hover{
 cursor: pointer;
}


/*下面是表格编辑框*/
.tableBox .editTable{
 width: 270px;
 background: yellow;
 height: 180px;
 position: absolute;
 left: 0px;
 z-index: 20000;
 float: left;
 color:blue;
 font-size: 20px;
 padding-top:10px;
}
.editTable div{
 width: 250px;
 height:40px;
 border:1px solid #ccc;
 padding-top: 5px;
 margin: 0 auto;
}
.editTable div input{
 height: 30px;
 width: 198px;
 text-align: center;
}

.editTable div button{
 height: 30px;
 width: 50px;
}
.editTable .dele,.editTable .close{
 width: 124px; 
}



#popBox{
 position: relative;
 width: 80%;
 height:0px;
 margin: 0 auto;
 background: red;
}

#fonteColorBox{
 display: none;
 position:absolute;
 z-index: 1001;
 width:79px;
 height:40px;
 top:20px;
  box-shadow: 20px  20px 10px #ccc;;
}
.showColor{
 display: inline-block;
 width:20px;
 height: 100%;
 border-left: 1px solid #ccc;
 background: yellow;
 float: right;
/* color:red;*/
}
#showColor1{
 background:#ffff00;
}
#showColor2
{
 background:#FF0000;
}

#backgroundColorBox{
 display: none;
 position: absolute;
 z-index: 1002;
 width:79px;
 height:40px;
 top:20px;
  box-shadow: 20px  20px 10px #ccc;;
}
#getColor1,#getColor2{
 width: 100%;
 height: 40px;
 z-index: 3;
 left:0px;
 top:40px;
 outline-style: none;
 padding: 0;
 border:1px solid #ccc;
}
#fontSizeBox{
 display: none;
 padding: 0;
 margin: 0;
 width: 200px;
 height:30px;
 z-index: 1003;
 position:absolute;
 top:20px;
 background: red;
 box-shadow: 20px  20px 10px #ccc;;

 
}
#fontSizeBox #fontSizeValue{
     display: inline-block;
   width:150px;
   height: 100%;
   outline-style: none;
   list-style: none;
   text-align: center;

}
#fontSizeBox button{
   display: inline-block;
  text-align: center;
  height: 100%;
  width: 50px;
  border: 1px solid; #ccc;
  font-size: 16px;
  background:yellow;
   float: right;
   outline-style: none;

}
#fontSizeBox button:nth-child(2)
{
   border-left: none;
}
#fontSizeBox button:hover{
 cursor: pointer;
}

#fontSizeBox button:active
{
   background: #ccc;
}

#insertTableBox{
 display:none;
 position:absolute;
 margin: 0 auto;
 width: 202px;
 height: 125px;
 z-index: 1004;
 top:20px;
 border: 1px solid #ccc;
  background: yellow;
  box-shadow: 20px  20px 10px #ccc;;
}


#insertTableBox input{
 text-align: center;
 margin-top: 20px;
 width:100px;
 height: 30px;
 float: left;
 border: none;
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;

 font-size: 16px;
 }

#insertTableBox span{
 display: inline-block;
 width:100px;
 height: 20px;
 line-height: 20px;
 font-size: 16px;
 margin-top:5px;
 text-align: center;

}
#insertTableBox  button{

display: block;
float: left;
width: 100px;
height: 30px;
border: none;
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
text-align: center;
line-height: 30px;
font-size: 16px;

}
#insertTableBox button:nth-child(6){
    border-left: 1px solid #ccc;

}

#insertTableBox  input:nth-child(2){
    border-left: 1px solid #ccc;

}


#showImgBox{
 display: none;
 position:absolute;
 background: #eee;
 width: 500px;
 height: 360px;
 top:180px;
 border: 0.5px dashed #ccc;
 box-shadow: 20px  20px 10px #ccc;
 z-index: 1005;
}
#showImg{
 width: 480px;
 height: 300px;
 margin: 0 auto;
 margin-top: 10px;
    white-space: normal; 
    word-wrap: break-word; 
    

}

#showImg img
{
 width: 480px;
 height: 290px;
 margin: 0 auto;
 box-shadow: 5px 5px 5px #ccc;
 border: 1px dashed #ccc;
 cursor: pointer;
}

#showImg video
{
 width: 480px;
 height: 290px;
 margin: 0 auto;
 box-shadow: 5px 5px 5px #ccc;
 border: 1px dashed #ccc;
 cursor: pointer;
}

#showImg a
{
 width: 480px;
 height: 290px;
 margin: 0 auto;
 box-shadow: 5px 5px 5px #ccc;
 border: 1px dashed #ccc;
 cursor: pointer;
 text-align: center;
 /*vertical-align: middle和display:table-cell让文字垂直居中*/
 vertical-align: middle;
}

#textArea img
{
 cursor: pointer;
}
#textArea video
{
 cursor: pointer;
}
#textArea a
{
 cursor: pointer;
}

#imgButtonBox {
 background: yellow;
 width: 480px;
 height: 40px;
 margin: 0 auto;
 box-shadow: 5px 5px 5px #ccc;
}

#imgButtonBox button{
 text-align: center;
    height:100% ;
 width: 160px;
    display: block;
    float: left;
    line-height: 40px;
    border:1px dashed #ccc ;
    cursor: pointer;
    background: yellow;
}
#file{
 display: none;
}

#changeTable{
 position: absolute;
 display: none;
 width: 300px;
 height: 200px;
 background: yellow;
 top:250px;
 z-index: 1006;
 border: 1px solid #ccc;
  box-shadow: 20px  20px 10px #ccc;;
}

#hanglie{
 padding-top:20px;
 font-size: 0px;
 width: 100%;
 height: 100px;
/* background: yellow;*/
 line-height: 60px;
 text-align: center;
}
#hanglie input{
 height: 30px;
 width: 100%;
 text-align: center;
 border: none;
 outline-style: none;
 border: none;
 border-bottom: 1px solid #ccc;
 border-top: 1px solid #ccc;
 font-size: 20px;
}

#hanglie button{
 height: 30px;
 width: 149px;
 border: none;
 outline-style: none;
 border: none;
 border-bottom: 1px solid #ccc;
 border-top: 1px solid #ccc;
}
#hanglie button:nth-child(2)
{

   border-right: 1px solid #ccc;;
}

#setWH{
 text-align: center;
 font-size: 0px;
 width: 100%;
 height: 100px;
 line-height: 60px;
 padding-top:10px;
/* background: blue;*/
}

#setWH input{
 height: 30px;
 width:100%;
 text-align: center;
 border: none;
 outline-style: none;
 font-size: 20px;
}


#setWH button{
    width: 99px;
    height: 30px;
    border: none;
 outline-style: none;
 border: none;
 border-bottom: 1px solid #ccc;
 border-top: 1px solid #ccc;
}
#setWH button:nth-child(3)
{
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;;
}
table input{
 outline-style: none;
 border: none;
}

#lineHeightBox{
 display: none;
 position: absolute;
 width:50px;
 /*height: 30px;*/
 z-index: 1007;
 background: red;
 padding: 0;
 border: 1px solid #ccc;
 font-size: 0px;
 border-bottom:none;
  box-shadow: 20px  20px 10px #ccc;

}
.boxTips{
 display:inline-block;
 margin: 0;
 width: 50px;
 height: 30px;
 width: 100%;
 float: right;
 cursor: pointer;
 background: #fff;
 border: none;
 text-align: center;
 border-bottom: 1px solid #ccc;
 font-size: 16px;
 line-height: 30px;
}
#lineHeightBox button{
 display:inline-block;
 margin: 0;
 width: 50px;
 height: 30px;
 width: 100%;
 float: right;
 cursor: pointer;
 background: #fff;
 border: none;
 text-align: center;
 border-bottom: 1px solid #ccc;
}
#lineHeightBox button:active{

  background: #ccc;
}


#foneWidthBox{
 display: none;
 position: absolute;
 width:50px;
 z-index: 1007;
 background: red;
 padding: 0;
 border: 1px solid #ccc;
 font-size: 0px;
 box-shadow: 20px  20px 10px #ccc;;
}

#foneWidthBox button{
 display:inline-block;
 margin: 0;
 width: 50px;
 height: 30px;
 width: 100%;
 float: right;
 cursor: pointer;
 background: #fff;
 border: none;
 text-align: center;
 border-bottom: 1px solid #ccc;
}

#foneWidthBox button:active{

background: #ccc;
}



#footer{
 width:80%;
 margin: 0  auto;
 margin-top: 10px;
 min-height: 120px;
 ackground: #bbb;
 text-align:center;
 box-shadow: 10px 10px 5px #ccc;
 line-height: 120px;
 border:1px solid #ccc;
    text-align: center;
    font-size: 14px;
    line-height: 35px;

}

